<template>
  <div class="groupon">
    <el-form-item label="预热时间" prop="prehead_time">
      <el-date-picker
        v-model="activityDetail.model.prehead_time"
        type="datetime"
        value-format="YYYY-MM-DD HH:mm:ss"
        format="YYYY-MM-DD HH:mm:ss"
        placeholder="预热时间"
        prefix-icon="Calendar"
        :disabled="activityStatus"
        :editable="false"
      />
    </el-form-item>
    <el-form-item
      label="拼团解散时间"
      prop="rules.valid_time"
      :rules="activityDetail.rules.valid_time"
    >
      <el-input
        class="sa-w-120"
        v-model="activityDetail.model.rules.valid_time"
        type="number"
        :disabled="activityStatus"
      >
        <template #append>小时</template>
      </el-input>
    </el-form-item>
    <el-form-item
      v-if="activityDetail.model.type == 'groupon'"
      label="成团人数"
      prop="rules.team_num"
      :rules="activityDetail.rules.team_num"
    >
      <el-input
        class="sa-w-120"
        v-positiveinteger
        v-model="activityDetail.model.rules.team_num"
        placeholder="最少两人"
        type="number"
        :disabled="activityStatus"
      >
        <template #append>人</template>
      </el-input>
    </el-form-item>
    <template v-if="activityDetail.model.type == 'groupon_ladder'">
      <el-form-item label="成团人数" required>
        <el-form-item
          class="is-no-asterisk"
          label="第一阶梯人数"
          label-width="fit-content"
          prop="rules.ladders.ladder_one"
          :rules="activityDetail.rules.ladder_one"
        >
          <el-input
            class="sa-w-120"
            v-positiveinteger
            v-model="activityDetail.model.rules.ladders.ladder_one"
            placeholder="最少两人"
            type="number"
            :disabled="activityStatus"
          >
            <template #append>人</template>
          </el-input>
        </el-form-item>
      </el-form-item>
      <el-form-item>
        <el-form-item
          class="is-no-asterisk"
          label="第二阶梯人数"
          label-width="fit-content"
          prop="rules.ladders.ladder_two"
          :rules="activityDetail.rules.ladder_two"
        >
          <el-input
            class="sa-w-120"
            v-positiveinteger
            v-model="activityDetail.model.rules.ladders.ladder_two"
            placeholder="最少两人"
            type="number"
            :disabled="activityStatus"
          >
            <template #append>人</template>
          </el-input>
        </el-form-item>
      </el-form-item>
      <el-form-item v-if="Object.keys(activityDetail.model.rules.ladders).includes('ladder_three')">
        <el-form-item
          class="is-no-asterisk"
          label="第三阶梯人数"
          label-width="fit-content"
          prop="rules.ladders.ladder_three"
          :rules="activityDetail.rules.ladder_three"
        >
          <el-input
            class="sa-w-120"
            v-positiveinteger
            v-model="activityDetail.model.rules.ladders.ladder_three"
            placeholder="最少两人"
            type="number"
            :disabled="activityStatus"
          >
            <template #append>人</template>
          </el-input>
          <el-button class="is-link sa-m-l-8" type="danger" @click="deleteLadders">删除</el-button>
        </el-form-item>
      </el-form-item>
      <el-form-item v-if="Object.keys(activityDetail.model.rules.ladders).length < 3">
        <el-button class="is-link" type="primary" @click="addLadders" :disabled="activityStatus"
          >+ 添加拼团梯队</el-button
        >
      </el-form-item>
    </template>
    <el-form-item label="单独购买">
      <el-switch
        v-model="activityDetail.model.rules.is_alone"
        active-value="1"
        inactive-value="0"
        :disabled="activityStatus"
      ></el-switch>
      <span class="sa-m-l-8">
        {{ activityDetail.model.rules.is_alone == 0 ? '不允许' : '允许' }}
      </span>
    </el-form-item>
    <el-form-item label="虚拟成团">
      <el-switch
        v-model="activityDetail.model.rules.is_fictitious"
        active-value="1"
        inactive-value="0"
        :disabled="activityStatus"
      ></el-switch>
      <span class="sa-m-l-8">
        {{ activityDetail.model.rules.is_fictitious == 0 ? '不允许' : '允许' }}
      </span>
      <div class="tip">
        开启虚拟成团后，在拼团有效期内人数不够的团，系统会虚拟用户凑满人数，使拼团成功。
        虚拟的用户不生成订单，只需对真实买家发货。(请在资料管理中添加足够数量的虚拟用户，否则虚拟成团不会成功)
      </div>
    </el-form-item>
    <div class="label-inner" v-if="activityDetail.model.rules.is_fictitious == 1">
      <el-form-item>
        <el-form-item
          class="is-no-asterisk"
          label="最多虚拟人数"
          label-width="fit-content"
          prop="rules.fictitious_num"
          :rules="activityDetail.rules.fictitious_num"
        >
          <el-input
            class="sa-w-120"
            v-model="activityDetail.model.rules.fictitious_num"
            type="number"
            :disabled="activityStatus"
          >
            <template #append>人</template>
          </el-input>
          <div class="tip sa-m-l-12"> 单团最多虚拟人数的名额限制，不填时，不限制名额 </div>
        </el-form-item>
      </el-form-item>
      <el-form-item>
        <el-form-item
          class="is-no-asterisk"
          label="虚拟成团时间"
          label-width="fit-content"
          prop="rules.fictitious_time"
          :rules="activityDetail.rules.fictitious_time"
        >
          <el-input
            class="sa-w-120"
            v-model="activityDetail.model.rules.fictitious_time"
            type="number"
            :disabled="activityStatus"
          >
            <template #append>小时</template>
          </el-input>
          <div class="tip sa-m-l-12">将会在拼团解散时间之前尝试虚拟成团</div>
        </el-form-item>
      </el-form-item>
    </div>
    <el-form-item label="参团卡显示">
      <el-switch
        v-model="activityDetail.model.rules.is_team_card"
        active-value="1"
        inactive-value="0"
        :disabled="activityStatus"
      ></el-switch>
      <span class="sa-m-l-8">
        {{ activityDetail.model.rules.is_team_card == 0 ? '关闭' : '开启' }}
      </span>
      <div class="tip sa-m-l-12">
        开启参团卡显示后，商品详情页显示未成团的团列表，买家可以直接选择一个参团。
      </div>
    </el-form-item>
    <el-form-item label="拼团销量展示">
      <el-radio-group
        v-model="activityDetail.model.rules.sales_show_type"
        :disabled="activityStatus"
      >
        <el-radio label="real">真实活动销量</el-radio>
        <el-radio label="goods">
          <div class="sa-flex">
            商品总销量
            <div class="tip sa-m-l-8">商品总销量包含虚拟销量</div>
          </div>
        </el-radio>
      </el-radio-group>
    </el-form-item>
    <!-- 是否参与分销 -PRO- -->
    <el-form-item label="是否参与分销">
      <el-switch
        v-model="activityDetail.model.rules.is_commission"
        active-value="1"
        inactive-value="0"
        :disabled="activityStatus"
      ></el-switch>
      <span class="sa-m-l-8">
        {{ activityDetail.model.rules.is_commission == 0 ? '不参与' : '参与' }}
      </span>
    </el-form-item>
    <el-form-item label="是否包邮">
      <el-switch
        v-model="activityDetail.model.rules.is_free_shipping"
        active-value="1"
        inactive-value="0"
        :disabled="activityStatus"
      ></el-switch>
      <span class="sa-m-l-8">
        {{ activityDetail.model.rules.is_free_shipping == 0 ? '不包邮' : '包邮' }}
      </span>
    </el-form-item>
    <el-form-item label="团长优惠">
      <el-switch
        v-model="activityDetail.model.rules.is_leader_discount"
        active-value="1"
        inactive-value="0"
        :disabled="activityStatus"
      ></el-switch>
    </el-form-item>
    <el-form-item label="限购数量">
      <el-input
        class="sa-w-120"
        v-positiveinteger
        v-model="activityDetail.model.rules.limit_num"
        type="number"
        :disabled="activityStatus"
      >
        <template #append>件</template>
      </el-input>
    </el-form-item>
    <el-form-item label="退款方式">
      <div>
        <el-radio-group v-model="activityDetail.model.rules.refund_type" :disabled="activityStatus">
          <el-radio label="back">原路返回</el-radio>
          <el-radio label="money">退回到余额</el-radio>
        </el-radio-group>
        <div class="tip">拼团失败解散时，默认退款方式</div>
      </div>
    </el-form-item>
    <el-form-item
      label="订单支付时间"
      prop="rules.order_auto_close"
      :rules="activityDetail.rules.order_auto_close"
    >
      <el-input
        class="sa-w-120"
        v-model="activityDetail.model.rules.order_auto_close"
        type="number"
        :disabled="activityStatus"
      >
        <template #append>分钟</template>
      </el-input>
    </el-form-item>
  </div>
</template>
<script setup>
  const props = defineProps(['activityDetail', 'activityStatus']);

  function addLadders() {
    props.activityDetail.model.rules.ladders.ladder_three = 4;
  }
  function deleteLadders() {
    delete props.activityDetail.model.rules.ladders.ladder_three;
  }
</script>
